<template>
    <div class="box">
        <div class="left">
            <div class="shadow">
                <div class="tool">
                    <span class="el-icon-rank"></span>
                    <span class="el-icon-delete-solid"></span>
                </div>
                <div class="number"><span class="red" v-if="mustchecked">*</span>1</div>
                <div class="content" @click="clickBox">
                  <div v-html="dealLine(title)"></div>
                </div>
                <div class="clear"></div>
                <div class="foot_tool">
                    <quill-editor
                        v-model="title"
                        ref="myQuillEditor"
                        :options="editorOption"
                        @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
                        @change="onEditorChange($event)">
                    </quill-editor>
                    <div class="mustchecked"><el-checkbox v-model="mustchecked">必答</el-checkbox></div>
                    <el-button type="primary" size="mini" @click="putLine">插入填空符</el-button>
                    <el-button type="primary" size="mini">填空属性</el-button>
                    <div class="mustchecked"><el-checkbox v-model="line_style" @change="changeStyle">文本框样式</el-checkbox></div>
                    <div class="clear"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  name: 'multiplefill',
  data() {
    return {
      title: '姓名：_________&nbsp;年龄：___岁<br/>电话：________________________',
      mustchecked: true,
      showrange: false,
      textarea: '',
      line_style: false,
      editorOption: {},
    };
  },
  watch: {
    line_style(val) {
      const content = document.getElementsByClassName('content')[0];
      if (val) {
        content.getElementsByClassName('tptext').forEach((item) => {
          // eslint-disable-next-line
          item.className = 'tptext line';
        });
      } else {
        content.getElementsByClassName('tptext').forEach((item) => {
          // eslint-disable-next-line
          item.className = 'tptext';
        });
      }
    },
  },
  computed: {
    editor() {
      return this.$refs.myQuillEditor.quill;
    },
  },
  methods: {
    changeStyle(v) {
      console.log(v);
    },
    clickBox() {
      console.log('click');
    },
    onEditorFocus(e) {
      console.log(e);
    },
    onEditorChange(e) {
      console.log(e);
    },
    onEditorBlur(e) {
      console.log(e);
    },
    putLine() {
      const quill = this.$refs.myQuillEditor.quill;
      const length = quill.getSelection().index;
      quill.insertText(length, '_');
      quill.setSelection(length + 1);
    },
    // 处理下划线
    dealLine(text) {
      const pattern = /_+/g;
      while (pattern.test(text)) {
        const leftText = RegExp.leftContext;
        const rightText = RegExp.rightContext;
        const startPosition = leftText.length;
        const endPosition = text.indexOf(rightText);
        const size = endPosition - startPosition;
        // eslint-disable-next-line
        text = leftText + '<input type="text" class="tptext" size="' + size + '">' + rightText;
      }
      return text;
    },
  },
};
</script>

<style scoped lang="scss">
.box{
    width: 100%;
    height: 100vh;
    background: #eee;
    .left{
        padding-top: 20px;
        width: 100%;
        height: 100%;
        .shadow{
            position: relative;
            margin: 0 auto;
            width: 1000px;
            .tool{
                position: absolute;
                top: 15px;
                right: 10px;
                color: #666;
                span{
                    font-size: 20px;
                    display: inline-block;
                    margin: 0 10px;
                }
            }
            .number{
                float: left;
                width: 12%;
                text-align: center;
                padding-top: 12px;
            }
            .content{
                float: left;
                width: 70%;
                p{
                    padding: 10px 0;
                }
                /deep/input{
                  border: 0;
                  border-bottom: 1px solid #DCDFE6;
                }
                /deep/.line{
                  border: 1px solid #DCDFE6;
                }
            }
            .foot_tool{
                margin-top: 15px;
                border-top: 1px solid #dfe4e6;
                background: #FAFAFA;
                padding: 10px 0;
                .mustchecked{
                    padding: 10px 5px;
                }
                .range{
                  display: inline-block;
                  margin-left: 10px;
                  .item{
                    display: inline-block;
                  }
                }
            }
            &:after{
                clear:both;
                display: block;
                content: '';
            }
        }
    }
    &:after{
        clear: both;
        content: '';
        display: block;
    }
}
</style>
